<template>
  <BasePage title="辅导员角色确认" description="请确认您的辅导员身份信息">
    <StatusCard 
      v-if="roleConfirmed" 
      type="success" 
      title="身份已确认" 
      description="您已成功确认辅导员身份"
    >
      <div class="mt-2 p-3 bg-white rounded-lg">
        <div class="flex justify-between items-center mb-2">
          <span class="text-gray-600">姓名</span>
          <span class="font-medium">{{ userInfo.name }}</span>
        </div>
        <div class="flex justify-between items-center mb-2">
          <span class="text-gray-600">工号</span>
          <span class="font-medium">{{ userInfo.id }}</span>
        </div>
        <div class="flex justify-between items-center mb-2">
          <span class="text-gray-600">学院</span>
          <span class="font-medium">{{ userInfo.college }}</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-600">角色</span>
          <span class="font-medium">辅导员</span>
        </div>
      </div>
    </StatusCard>
    
    <BaseForm v-else @submit="confirmRole">
      <div class="form-group">
        <label class="form-label">姓名</label>
        <input 
          v-model="userInfo.name" 
          type="text" 
          class="form-input" 
          placeholder="请输入您的姓名"
          required
        >
      </div>
      
      <div class="form-group">
        <label class="form-label">工号</label>
        <input 
          v-model="userInfo.id" 
          type="text" 
          class="form-input" 
          placeholder="请输入您的工号"
          required
        >
      </div>
      
      <div class="form-group">
        <label class="form-label">学院</label>
        <select v-model="userInfo.college" class="form-input" required>
          <option value="">请选择学院</option>
          <option v-for="college in colleges" :key="college" :value="college">
            {{ college }}
          </option>
        </select>
      </div>
      
      <div class="form-group">
        <label class="form-label">手机号</label>
        <input 
          v-model="userInfo.phone" 
          type="tel" 
          class="form-input" 
          placeholder="请输入您的手机号"
          pattern="[0-9]{11}"
          required
        >
      </div>
    </BaseForm>
    
    <template v-if="roleConfirmed" #footer>
      <button 
        @click="editInfo" 
        class="w-full py-3 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
      >
        修改信息
      </button>
    </template>
  </BasePage>
</template>

<script setup>
import { ref } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseForm from '../../components/BaseForm.vue';
import StatusCard from '../../components/StatusCard.vue';

// 模拟学院数据
const colleges = [
  '计算机科学与技术学院',
  '电子信息工程学院',
  '机械工程学院',
  '经济管理学院',
  '外国语学院',
  '数学与统计学院',
  '物理与光电工程学院',
  '化学与材料科学学院',
  '生命科学学院',
  '建筑与土木工程学院'
];

// 用户信息
const userInfo = ref({
  name: '',
  id: '',
  college: '',
  phone: ''
});

// 角色确认状态
const roleConfirmed = ref(false);

// 确认角色
const confirmRole = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 成功确认角色
  roleConfirmed.value = true;
  
  // 在实际应用中，这里会发送请求到后端保存用户信息
  console.log('角色确认成功:', userInfo.value);
};

// 编辑信息
const editInfo = () => {
  roleConfirmed.value = false;
};
</script>